<template>
  <div class="detail">
    <el-form label-width="100px" style="padding: 0 100px;" :model="formModel" :rules="rules" ref="info">
        <el-form-item label="姓名:" prop="username">
            <el-input size="mini"  v-model="formModel.username"></el-input>
        </el-form-item>
        <el-form-item label="工号:" prop="workNumber">
            <el-input size="mini" v-model="formModel.workNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机:" prop="mobile">
            <el-input size="mini" v-model="formModel.mobile" :disabled="!!$route.params.id"></el-input>
        </el-form-item>
        <el-form-item label="部门:" prop="departmentId">
            <!-- <el-input size="mini" v-model="formModel.departmentId"></el-input> -->
             <selectTreeVue v-model="formModel.departmentId"></selectTreeVue>
        </el-form-item>
        <el-form-item label="聘用形式:" prop="formOfEmployment">
            <el-select v-model="formModel.formOfEmployment" size="mini" style="width: 100%;">
              <el-option label="正式" :value="1"></el-option>
              <el-option label="非正式" :value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="入职时间:" prop="timeOfEntry" >
            <el-date-picker 
            v-model="formModel.timeOfEntry"  
            type="date"
            placeholder="选择日期时间" 
            size="mini"
            style="width: 100%;"
            format="yyyy-MM-dd"/>
        </el-form-item>
        <el-form-item label="转正时间:" prop="correctionTime">
           <el-date-picker 
           v-model="formModel.correctionTime"  
           type="date" 
           format="yyyy-MM-dd"
           placeholder="选择日期时间" 
           size="mini"
           style="width: 100%;"/>
        </el-form-item>
        <el-form-item label="员工头像:">
             <ImageUpload v-model="formModel.staffPhoto"></ImageUpload>
        </el-form-item>
       <el-row type="flex" align="middle" justify="center" style="height: 100px;">
         <el-button type="primary" size="mini" @click="save">保存更新</el-button>
       </el-row>
    </el-form>
  </div>
</template>
<script>
import { Message } from 'element-ui';
import selectTreeVue from './compoents/select-tree.vue'
import { getAddStaffService, getInfoService, getExitService } from '@/api/staff';
import ImageUpload from './compoents/ImageUpload.vue'
export default {
  components: { selectTreeVue, ImageUpload },
  data(){
    return {
      formModel: {
        username:'', //员工名字
        mobile: '' ,//员工手机号
        formOfEmployment: '', //员工聘用形式
        workNumber: '' ,// 员工工号
        departmentId: null , //部门id
        timeOfEntry: '' , //入职日期
        correctionTime: '' , //员工转正日期
        staffPhoto: '' //头像信息
      } ,
      rules: {
        // 员工名字校验
        username: [
          {required: true, message: '员工姓名不能为空', trigger:'blur'},
          { min: 2, max: 4, message: '员工名字必须为2-4个字符长度',  trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确格式的手机号', trigger: 'blur' }
        ],
        departmentId: [
          { required: true, message: '部门id不能为空', trigger: 'blur' },
        ],
        formOfEmployment: [
          { required: true, message: '聘用形式不能为空', trigger: 'blur' },
        ],
        timeOfEntry: [
          { required: true, message: '入职时间不能为空', trigger: 'blur' },
        ],
        correctionTime: [
          { required: true, message: '转正时间不能为空', trigger: 'blur' },
          {
            validator: (rules, value, callback) => {
              // 判断用户有没有填写入职时间
              if(this.formModel.timeOfEntry){
                if(new Date(value) < new Date(this.formModel.timeOfEntry)){
                    callback(new Error('入职时间不能小于转正时间'))
                    return
                }else{ 
                    callback()
                }
              }
            }
          }
        ]
      }
    }
  },
  created() {
    if(this.$route.params.id){
      this.getInfo()
    }
  },
  methods: {
    async getInfo() {
      const res = await getInfoService(this.$route.params.id)
      this.formModel = res
    },
    async save(){
      this.$refs.info.validate()
      if(this.$route.params.id){
        await getExitService(this.formModel)
        Message({type: 'success', message: '编辑完成'}) 
        this.$router.push('/employee')
      }else{
        await getAddStaffService(this.formModel)
        this.$router.push('/employee')
        Message({type: 'success' , message: '新增员工成功'})
      }
    },
    
  }
}
</script>

<style scoped>
.detail{
  padding-top: 20px;
  width: 600px;
}
</style>